<template>
	<view class="searchbox">
		<icon type="search"></icon>
		<input type="text" @confirm="myconfirm" @input="modifykey" v-model="mykey" />
	</view>
</template>

<script>
	export default {
		props:['kkey'],
		created() {
			this.mykey = this.kkey
		},
		data(){
			return {
				mykey:''
			}
		},
		watch:{
			kkey(){
				this.mykey = this.kkey
			}
		},
		methods:{
			myconfirm(){
				this.$emit('myconfirm',this.mykey)
				console.log(this.mykey)
			},
			modifykey(){
				this.$emit('modifykey',this.mykey)
			}
		}
	}
</script>

<style lang="less">
	.searchbox{
		background-color: #eee;
		padding: 30rpx 16rpx;
		position: relative;
		icon{
			position: absolute;
			top: 50%;
			left: 30rpx;
			transform: translateY(-50%);
		}
		input{
			background-color: #FFFFFF;
			height: 60rpx;
			padding-left: 70rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
</style>
